<div class="row">
    <div class="col-sm-12">
        <!-- 查询条件 -->
        <div class="box box-primary">
            <div *ngIf="displayModel == 'one' || displayModel == 'all'" class="box-header with-border">
                <div class="box-title">
                    存款账户列表
                    <button type="submit" class="btn btn-danger" (click)="delAccountMore()">删除</button>
                    <button type="submit" class="btn btn-primary" (click)="toggleModal('openAccountModal')">新增账户</button>
                    <button type="submit" class="btn btn-primary" (click)="tradeInfo()">定期存款存单信息</button>
                    <button type="submit" class="btn btn-default" (click)="getTradeList()">历史交易</button>
                </div>
            </div>
            <div *ngIf="displayModel == 'tradeInfo'" class="box-header with-border">
                <div class="box-title">
                    定期存款存单信息
                    <button type="submit" class="btn btn-primary" (click)="reBack()">返回</button>
                </div>
            </div>
            <div *ngIf="displayModel == 'tradeList'" class="box-header with-border">
                <div class="box-title">
                    历史交易列表
                    <button type="submit" class="btn btn-primary" (click)="reBack()">返回</button>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box box-body table-responsive">
                <form  *ngIf="displayModel == 'one' || displayModel == 'all'" class="form-inline">
                    <div class="form-group ext-from-item">
                        <label for="depositNO">定存ID：</label>
                        <input type="text" class="form-control" id="depositNO" placeholder="lDepositNo"
                               [(ngModel)]="searchBody.depositId" name="depositNO">
                    </div>
                    <div class="form-group ext-from-item">
                        <button type="submit" class="btn btn-primary" (click)="getAccountInfo()">查询</button>
                        <button type="submit" class="btn btn-warning" (click)="reset()">重置</button>
                    </div>
                </form>
                <form  *ngIf="displayModel == 'tradeInfo'" class="form-inline">
                    <div class="form-group ext-from-item">
                        <label for="vFundCode">基金代码：</label>
                        <input type="text" class="form-control" id="vFundCode" placeholder="vcFundCode"
                                [(ngModel)]="tradeInfoBody.vcFundCode" name="vFundCode">
                    </div>
                    <div class="form-group ext-from-item">
                        <button type="submit" class="btn btn-primary" (click)="getTradeInfo()">查询</button>
                        <button type="submit" class="btn btn-warning" (click)="resettradeInfo()">重置</button>
                    </div>

                </form>
                <div class="table-scroll-content">
                <!-- one -->
                <table *ngIf="displayModel == 'one'" class="table table-bordered table-keep-line">
                    <tr>
                        <th>基金名称</th>
                        <th>基金代码</th>
                        <th>开户银行</th>
                        <th>开户账号</th>
                        <th>账号名称</th>
                        <th>定存金额</th>
                        <th>定存利率</th>
                        <th>币种</th>
                        <th>大额支付系统号</th>
                        <th>委托开户人</th>
                        <th>确认状态</th>
                        <th>基金经理确认</th>
                        <th>划款状态</th>
                        <th>协存资料</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>{{accountOne.vcFundName}}</td>
                        <td>{{accountOne.vcFundCode}}</td>
                        <td>{{accountOne.vcFullbankkname}}</td>
                        <td>{{accountOne.vcZhcode}}</td>
                        <td>{{accountOne.vcZhname}}</td>
                        <td>{{accountOne.vcAmount}}</td>
                        <td>{{accountOne.vcIntRate}}</td>
                        <td>{{accountOne.vcCurrencyName}}</td>
                        <td>{{accountOne.vcZhmaxpay}}</td>
                        <td>{{accountOne.empid}}</td>
                        <!-- 确认状态 -->
                        <td *ngIf="accountOne.cManagerStatus == null || accountOne.cManagerStatus == 0 " style="color:red">待确认</td>
                        <td *ngIf="accountOne.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 基金经理确认 -->
                        <td *ngIf="accountOne.cManagerStatus == null || accountOne.cManagerStatus == 0 ">
                             <a (click)="managerConfirm(accountOne)" class="btn btn-primary btn-xs">确认</a>
                        </td>
                        <td *ngIf="accountOne.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 划款状态 -->
                        <td *ngIf="accountOne.cTransferStatus == null || accountOne.cTransferStatus == 0" style="color:red">未划款</td>
                        <td *ngIf="accountOne.cTransferStatus == 1">已划款<span class="fa fa-check bg-green"></span></td>
                        <td>
                            <a class="btn btn-primary btn-xs" (click)="toggleModal('uploadModel',accountOne)">上传</a>
                            <a class="btn btn-primary btn-xs" (click)="downLoadFile()">下载</a>
                        </td>
                        <td>
                            <a type="submit" class="btn btn-primary btn-xs" (click)="toggleModal('accountModal',accountOne)">编辑</a>
                            <a type="submit" class="btn btn-danger btn-xs" (click)="delAccount()">删除</a>
                        </td>
                    </tr>
                </table>
                <!-- all -->
                <table *ngIf="displayModel == 'all'" class="table table-bordered table-hover table-striped table-keep-line">
                    <tr>
                        <th><input type="checkbox" name="checkall" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()"></th>
                        <th>基金名称</th>
                        <th>基金代码</th>
                        <th>开户银行</th>
                        <th>开户账号</th>
                        <th>账号名称</th>
                        <th>定存金额</th>
                        <th>定存利率</th>
                        <th>币种</th>
                        <th>大额支付系统号</th>
                        <th>委托开户人</th>
                        <th>确认状态</th>
                        <th>基金经理确认</th>
                        <th>划款状态</th>
                        <th>协存资料</th>
                        <th>操作</th>
                    </tr>
                    <tr *ngFor="let accountlist of accountList">
                        <td><input type="checkbox" id="checkbox" name="checkbox" [(ngModel)]="accountlist.isChecked"></td>
                        <td>{{accountlist.vcFundName}}</td>
                        <td>{{accountlist.vcFundCode}}</td>
                        <td>{{accountlist.vcFullbankkname}}</td>
                        <td>{{accountlist.vcZhcode}}</td>
                        <td>{{accountlist.vcZhname}}</td>
                        <td>{{accountlist.vcAmount}}</td>
                        <td>{{accountlist.vcIntRate}}</td>
                        <td>{{accountlist.vcCurrencyName}}</td>
                        <td>{{accountlist.vcZhmaxpay}}</td>
                        <td>{{accountlist.empid}}</td>
                        <!-- 确认状态 -->
                        <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 " style="color:red">待确认</td>
                        <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 基金经理确认 -->
                        <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 ">
                             <a (click)="managerConfirm(accountlist)" class="btn btn-primary btn-xs">确认</a>
                        </td>
                        <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 划款状态 -->
                        <td *ngIf="accountlist.cTransferStatus == null || accountlist.cTransferStatus == 0 " style="color:red">未划款</td>
                        <td *ngIf="accountlist.cTransferStatus == 1">已划款<span class="fa fa-check bg-green"></span></td>
                        <td>
                            <a class="btn btn-primary btn-xs" (click)="toggleModal('uploadModel',accountlist)">上传</a>
                            <a class="btn btn-primary btn-xs" (click)="downLoadFile(accountlist)">下载</a>
                        </td>
                        <td>
                            <a type="submit" class="btn btn-primary btn-xs" (click)="toggleModal('accountModal',accountlist)">编辑</a>
                            <a type="submit" class="btn btn-danger btn-xs" (click)="delAccount(accountlist)">删除</a>
                        </td>
                    </tr>
                </table>
                <!-- 定期存款存单信息 -->
                <table *ngIf="displayModel == 'tradeInfo'" class="table table-bordered table-hover table-striped table-keep-line">
                    <tr>
                        <th>基金名称</th>
                        <th>基金代码</th>
                        <th>开户银行</th>
                        <th>开户账号</th>
                        <th>账号名称</th>
                        <th>定存金额</th>
                        <th>定存利率</th>
                        <th>币种</th>
                        <th>大额支付系统号</th>
                        <th>委托开户人</th>
                        <th>确认状态</th>
                        <th>基金经理确认</th>
                        <th>划款状态</th>
                    </tr>
                    <tr *ngFor="let accountlist of tradeInfoList">
                        <td>{{accountlist.vcFundName}}</td>
                        <td>{{accountlist.vcFundCode}}</td>
                        <td>{{accountlist.vcFullbankkname}}</td>
                        <td>{{accountlist.vcZhcode}}</td>
                        <td>{{accountlist.vcZhname}}</td>
                        <td>{{accountlist.vcAmount}}</td>
                        <td>{{accountlist.vcIntRate}}</td>
                        <td>{{accountlist.vcCurrencyName}}</td>
                        <td>{{accountlist.vcZhmaxpay}}</td>
                        <td>{{accountlist.empid}}</td>
                        <!-- 确认状态 -->
                        <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 " style="color:red">待确认</td>
                        <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 基金经理确认 -->
                        <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 ">
                                <a (click)="managerConfirm(accountlist)" class="btn btn-primary btn-xs">确认</a>
                        </td>
                        <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                        <!-- 划款状态 -->
                        <td *ngIf="accountlist.cTransferStatus == null || accountlist.cTransferStatus == 0 " style="color:red">未划款</td>
                        <td *ngIf="accountlist.cTransferStatus == 1">已划款<span class="fa fa-check bg-green"></span></td>
                    </tr>
                </table>
                <!-- 历史交易列表 -->
                <table *ngIf="displayModel == 'tradeList'" class="table table-bordered table-hover table-striped table-keep-line">
                        <tr>
                            <th>基金名称</th>
                            <th>基金代码</th>
                            <th>开户银行</th>
                            <th>开户账号</th>
                            <th>账号名称</th>
                            <th>定存金额</th>
                            <th>定存利率</th>
                            <th>币种</th>
                            <th>大额支付系统号</th>
                            <th>委托开户人</th>
                            <th>确认状态</th>
                            <th>基金经理确认</th>
                            <th>划款状态</th>
                        </tr>
                        <tr *ngFor="let accountlist of accountList">
                            <td>{{accountlist.vcFundName}}</td>
                            <td>{{accountlist.vcFundCode}}</td>
                            <td>{{accountlist.vcFullbankkname}}</td>
                            <td>{{accountlist.vcZhcode}}</td>
                            <td>{{accountlist.vcZhname}}</td>
                            <td>{{accountlist.vcAmount}}</td>
                            <td>{{accountlist.vcIntRate}}</td>
                            <td>{{accountlist.vcCurrencyName}}</td>
                            <td>{{accountlist.vcZhmaxpay}}</td>
                            <td>{{accountlist.empid}}</td>
                            <!-- 确认状态 -->
                            <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 " style="color:red">待确认</td>
                            <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                            <!-- 基金经理确认 -->
                            <td *ngIf="accountlist.cManagerStatus == null || accountlist.cManagerStatus == 0 ">
                                 <a (click)="managerConfirm(accountlist)" class="btn btn-primary btn-xs">确认</a>
                            </td>
                            <td *ngIf="accountlist.cManagerStatus == 1">已确认<span class="fa fa-check bg-green"></span></td>
                            <!-- 划款状态 -->
                            <td *ngIf="accountlist.cTransferStatus == null || accountlist.cTransferStatus == 0 " style="color:red">未划款</td>
                            <td *ngIf="accountlist.cTransferStatus == 1">已划款<span class="fa fa-check bg-green"></span></td>
                        </tr>
                    </table>
                </div>
                <app-pagination *ngIf="displayModel == 'all'" [currentPageNum]="pageInfo.currentPageNum" [pagesShow]="pageInfo.pagesShow" [totalPages]="pageInfo.totalPages" (pageChanged)="getCurrentPageNum($event)"></app-pagination>
                <app-pagination *ngIf="displayModel == 'tradeInfo'" [currentPageNum]="tradeInfoPage.currentPageNum" [pagesShow]="tradeInfoPage.pagesShow" [totalPages]="tradeInfoPage.totalPages" (pageChanged)="getTradeInfoPageNum($event)"></app-pagination>
                <app-pagination *ngIf="displayModel == 'tradeList'" [currentPageNum]="tradeListPage.currentPageNum" [pagesShow]="tradeListPage.pagesShow" [totalPages]="tradeListPage.totalPages" (pageChanged)="getTradeListPageNum($event)"></app-pagination>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>

<!-- 发起开户 -->
<div class="modal fade" id="openAccountModal" tabindex="-1" role="dialog" aria-labelledby="发起开户">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="resetAddInfo()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="openAccount">发起开户</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" #addForm="ngForm">
                    <div class="form-group ext-from-item">
                        <label for="fundno">基金内码：</label>
                        <input type="text" class="form-control" id="fundno" placeholder="基金内码" required
                                [(ngModel)]="account.fundno" name="fundno">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="empid">委托开户人：</label>
                        <select class="form-control" id="empid" placeholder="委托人"
                                [(ngModel)]="account.empid" name="empid" required>
                            <option>张三</option>
                            <option>李四</option>
                            <option>王五</option>
                        </select>
                        <button class="btn btn-primary" (click)="getFundInfoList()">获取基金信息</button>
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="fundname">基金名称：</label>
                        <input type="text" class="form-control" id="fundname" placeholder="基金名称" required
                                [(ngModel)]="account.fundname" name="fundname">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="fundcode">基金代码：</label>
                        <input type="text" class="form-control" id="fundcode" placeholder="基金代码" required
                                [(ngModel)]="account.fundcode" name="fundcode">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="amount">定存金额：</label>
                        <input type="text" class="form-control" id="amount" placeholder="定存金额" required
                               [(ngModel)]="account.amount" name="amount">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="intrate">定存利率：</label>
                        <input type="text" class="form-control" id="intrate" placeholder="定存利率" required
                                [(ngModel)]="account.intrate" name="intrate">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="currencyName">币种名称：</label>
                        <input type="text" class="form-control" id="currencyName" placeholder="币种" required
                                [(ngModel)]="account.currencyName" name="currencyName">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="zhmaxpay">大额支付号：</label>
                        <input type="text" class="form-control" id="zhmaxpay" placeholder="大额支付号" required
                                [(ngModel)]="account.zhmaxpay" name="zhmaxpay">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="zhcode">银行帐户号：</label>
                        <input type="text" class="form-control" id="zhcode" placeholder="银行帐户号" required
                                [(ngModel)]="account.zhcode" name="zhcode">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="zhname">银行帐户名：</label>
                        <input type="text" class="form-control" id="zhname" placeholder="银行帐户名" required
                                [(ngModel)]="account.zhname" name="zhname">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="bank">开户银行：</label>
                        <select class="form-control" id="bank" placeholder="银行名称"
                                [(ngModel)]="account.bank" name="bank" required>
                            <option>招商银行</option>
                            <option>建设银行</option>
                            <option>工商银行</option>
                        </select>
                        <input type="text" class="form-control" id="fbank" placeholder="分行名称" required
                               [(ngModel)]="account.fbank" name="fbank">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" (click)="resetAddInfo()">关闭</button>
                <button type="submit" class="btn btn-primary addsumbit" [disabled]="!addForm.form.valid" (click)="addAccount()">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 发起开户 END-->

<!-- 编辑信息 -->
<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="账户信息">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="">账户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group ext-from-item">
                        <label for="zhcode">开户账号：</label>
                        <input type="text" class="form-control" id="zhcode" placeholder="开户账号"
                               [(ngModel)]="editAccountInfo.vcZhcode" name="zhcode" >
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="zhname">帐号名称：</label>
                        <input type="text" class="form-control" id="zhname" placeholder="帐号名称" 
                               [(ngModel)]="editAccountInfo.vcZhname" name="zhname">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="amount">定存金额：</label>
                        <input type="text" class="form-control" id="amount" placeholder="定存金额"
                                [(ngModel)]="editAccountInfo.vcAmount" name="amount">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="intrate">定存利率：</label>
                        <input type="text" class="form-control" id="intrate" placeholder="定存利率"
                                [(ngModel)]="editAccountInfo.vcIntRate" name="intrate">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="maxpay">大额支付号：</label>
                        <input type="text" class="form-control" id="maxpay" placeholder="大额支付号"
                                [(ngModel)]="editAccountInfo.vcZhmaxpay" name="maxpay">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="currencyName">币种：</label>
                        <input type="text" class="form-control" id="currencyName" placeholder="币种"
                               [(ngModel)]="editAccountInfo.vcCurrencyName" name="currencyName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" (click)="editAccount()">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑信息 END-->

<!-- 上传协存资料 start -->
<div class="modal fade" id="uploadModel" tabindex="-1" role="dialog" aria-labelledby="上传文件">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button  (click)="clearFileQueue()" type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">上传文件</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="XCFile">请选择要上传的文件：</label>
                        <input type="file" class="form-control filenamex" id="XCFile"
                               ng2FileSelect [uploader]="uploader"
                               (change)="selectedFileOnChanged($event)">
                        <!-- 选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性 -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="clearFileQueue()" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" [disabled]="!fileStatus" (click)="uploadFile()">上传</button>
            </div>
        </div>
    </div>
</div>

<!-- 获取基金信息 -->
<div class="modal fade" id="FundListModal" tabindex="-1" role="dialog" aria-labelledby="基金信息列表">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">基金信息列表</h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover table-striped">
                    <tr>
                        <th>基金名称</th>
                        <th>基金代码</th>
                        <th>选择</th>
                    </tr>
                    <tr *ngFor="let fundInfo of fundInfoList">
                        <td>{{fundInfo.vcFundName}}</td>
                        <td>{{fundInfo.vcFundCode}}</td>
                        <td><button class="btn btn-success btn-sm" (click)="getFundInfo(fundInfo)">选择</button></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 备用模版 -->
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="上传协议文件">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">上传协议文件</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-info">上传</button>
            </div>
        </div>
    </div>
</div>